<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :append-to-body="body"
    top="250px"
    style="min-width:500px"
    :show-close="show"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="left"
      label-width="70px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="友链名称" prop="linkname">
        <el-input v-model="temp.linkname" />
      </el-form-item>
      <el-form-item label="友链链接" prop="linkhref">
        <el-input v-model="temp.linkhref" />
      </el-form-item>
      <div>
        <el-button @click="closeDialog">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="title === '新建友链' ? createData() : updateData()"
        >
          提交
        </el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "TypeDialog",
  props: {
    title: String,
    dialogFormVisible: Boolean,
    row: Object
  },
  watch: {
    row() {
      this.temp.linkname = this.row.linkname;
      this.temp.linkhref = this.row.linkhref;
    }
  },
  data() {
    const validateLinkname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("友链名称不允许为空"));
      } else {
        callback();
      }
    };
    const validateLinkhref = (rule, value, callback) => {
      if (!value) {
        callback(new Error("链接不允许为空"));
      } else {
        callback();
      }
    };
    return {
      temp: {
        linkname: "",
        linkhref: ""
      },
      rules: {
        linkname: [{ validator: validateLinkname, trigger: "blur" }],
        linkhref: [{ validator: validateLinkhref, trigger: "blur" }]
      },
      body: true,
      show: false
    };
  },
  methods: {
    createData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let linkName = this.temp.linkname,
            linkHref = this.temp.linkhref;
          this.$emit("createData", { linkName, linkHref });
          this.initData();
        }
      });
    },
    updateData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let linkName = this.temp.linkname,
            linkHref = this.temp.linkhref;
          this.$emit("updateData", { linkName, linkHref });
          this.initData();
        }
      });
    },
    initData() {
      this.temp.linkname = "";
      this.temp.linkhref = "";
    },
    closeDialog() {
      this.temp.linkname = "";
      this.temp.linkhref = "";
      this.$emit("closeDialog");
    }
  }
};
</script>

<style>
</style>